<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="/css/socket.css" />
		<title></title>
		<script src="/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="main">
			<div class="left">
				<div id="msg" class="ul-box">
					<ul class="after">
						<!-- <li>
							<div class="head">
								<div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div>
							</div>
							<div class="content">
								<img src="img/bg.jpg" />
							</div>
						</li> -->
					</ul>
				</div>
				<div id="result" class="ul-box">
					<div class="results">
						<p>节目比赛投票结果</p>
						<ul class="after">
							<!-- <li><span>节目一</span><span>100票</span><meter max="100" min="0" value="60"></meter></li> -->
						</ul>
					</div>
				</div>
				<div id="gameresult" class="ul-box">
					<div class="results">
						<p><span id="gemetitle" style="color: red;"></span> 游戏竞赛前十排行榜</p>
						<p>答案：<span id="gameanswer">猪</span></p>
						<ul class="after">
							<!-- <li>
								<span>第一名：</span>
								<div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div>
							</li> -->
						</ul>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="code">
					<img src="" />
				</div>
				<div class="cn">
					公众号二维码
				</div>
			</div>
		</div>
	</body>
<script type="text/javascript">
function getHost(){
	var host=window.location.host;
	if(host.indexOf("8080")==-1){
		host=host+":8080";
	}
	return host;
}
var  ws;
var url="ws://"+getHost()+"/information";
function onopenSocket(){
	if ('WebSocket' in window) {
        ws = new WebSocket(url);
    } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(url);
    } else {
        alert('WebSocket is not supported by this browser.');
        return;
    }
	ws.onmessage=function (event){
		try{
		eval("var data="+event.data);
			
		}catch(e){
			var data=event.data;
		}
		
		//var data=event.data;
		if(data.type==1001){
			var content = data.content;
			var li = '<li><div class="head"><div class="imgbox"><img src="'+data.head+'"/></div><div class="name">'+data.name+'</div><div class="time">'+data.sendtime+'</div></div><div class="content">'+content+'</div></li>';
			$("#msg ul").append(li);
			$("#msg ul li:last-child").fadeIn(500);
			$("#msg ul li:last-child").css('display','block');
			$("#msg").animate({
				scrollTop: $("#msg ul").height() + 'px'
			},800);
			return ;
		}
		if(data.type==1002){
			var li = '<li><div class="head"><div class="imgbox"><img src="'+data.head+'"/></div><div class="name">'+data.name+'</div><div class="time">'+data.sendtime+'</div></div><div class="content"><img src="'+data.picurl+'"/></div></li>';
			$("#msg ul").append(li);
			$("#msg ul li:last-child").fadeIn(500);
			$("#msg ul li:last-child").css('display','block');
			$("#msg").animate({
				scrollTop: $("#msg ul").height() + 'px'
			},800);
		}
		if(data.type==2001){
			$("#result ul").html("");
			$.each(data.result,function(index,item){
				var voitResult='<li><span>'+item.name+'</span><span>'+item.resultCode+'票</span><meter max="500" min="0" value="'+item.resultCode+'"></meter></li>';
				$("#result ul").append(voitResult);
			});
			showVoid();
		}
		if(data.type==2005){
			$("#gameresult ul").html("");
			$("#gameresult #gemetitle").html(data.title);
			$("#gameresult #gameanswer").html(data.solution);
			$.each(data.result,function(index,item){
			var gameresult='<li><span>第'+(index+1)+'名：</span><div class="imgbox"><img src="'+item.head+'" /></div><div class="name">'+item.nickname+'</div><div class="time">'+item.createTime+'</div></li>';
			$("#gameresult ul").append(gameresult);
			})
			showGame();
		}
		if(data.type==2004){
			showPrompt(data.result);
		}
		if(data.type==3001){
			hideContent();
		}
	}
}
//提示内容
function showPrompt(content){
	
}
//显示投票结果
function showVoid(){
	$('#msg').css('height','0');
	$('#gameresult').fadeOut(400,function(){$('#result').fadeIn(400);});
	
}

//显示游戏结果 
function showGame(){
   $('#msg').css('height','0');
   $('#result').fadeOut(400,function(){$('#gameresult').fadeIn(400);});
   
}
//隐藏内容
function hideContent(){
	$('#result').fadeOut(400);
	$('#gameresult').fadeOut(400);
	$('#msg').css('height','');
}
$(function(){
	onopenSocket();
})

</script>
</html>